<template>

  <div class="common-layout">
    <el-container>
      <el-header class="el-header">
        <div><img src="@/assets/1.png" style="width: 30px; height: 30px; border-radius: 50%;" alt=""></div>
        <div><h3>急寻：面神经炎的治疗方法</h3></div>
        <div><el-icon class="el-header-icon"><Bell /></el-icon></div>
      </el-header>
      <el-main>
        <div>
            <h1 class="ls">张三</h1>
            <p class="ls">[病症]</p>
            <p class="p1">面神经炎</p>
            <p class="ls">[科室]</p>
            <p class="p1">内科</p>
            <p class="ls">[病症描述]</p>
            <p class="p1">周围性神经炎，下巴斜的，口齿不清，眼睛闭合不了，右边脸明显动不了</p>
            <p class="ls">[治疗经历]</p>
            <p class="p1"><span>北京天坛医院</span><span>2018.12.10-12.15</span></p>
            <p class="p1">每天进行扎针和按摩，现在情况已经好转了，眼睛基本上可以闭合了，说话也没那么费劲了。</p>
            <p class="ls">[相关图片]</p>
            <img class="img1" src="@/image/病例照片.png" alt="">
            <p class="zp"><el-icon class="ic1"><Star /></el-icon><span class="fff">3</span>
                
                <el-icon class="ic"><ChatDotRound /></el-icon><span class="fff1">102</span></p>
           
           
           
                <p class="p1">被采纳的建议</p>
            <div>
              
                <div class="uia">
                    <h1>猪小妹</h1>
                    <p class="opop">获得20H币</p>
                   <p class="youfu">2018.9.20</p>
                </div>
                
            </div>
            <p @click="show = true" >你好，面神经炎也叫面神经麻痹或周围性面瘫，急性期可以应用抗病毒药物和激素，营养神经，活血等治疗，同时可以合并针灸</p>
            <div class="khz"></div>
           
<van-overlay :show="show" @click="show = false">
   <div class="ysjy1">
   <div class="qqq">
    <img src="@/assets/y1.png" alt="">
   </div>
   <div class="right">
<h2>小楠楠</h2>
<p class="xiao">面神经出现面部肌肉瘫痪可以通过服用药物衣机针灸`按摩等非手术方法进行治疗和改善,一般会慢慢康复</p>
<span class="sj">07/04/2018</span>

<span class="dz"><van-icon name="good-job-o" />99<van-icon name="down" />5</span>
   </div>
   </div>
      <div class="ysjy">
   <div class="qqq">
    <img src="@/assets/y2.png" alt="">
   </div>
   <div class="right">
<h2>小妮子</h2>
<p class="xiao">继续听医生的安排给予激素类药物衣机营的药物对症处理同时配合针灸理疗效果还是很好的大多数都会痊愈所以不要着急</p>
<span class="sj">03/22/2018</span>

<span class="dz"><van-icon name="good-job-o" />99<van-icon name="down" />0</span>
   </div>
   </div>
 
   <div class="fbfb">  <div><van-icon name="clear" :size="100" class="qqq"/></div><input type="text" placeholder="在此发表你的看法"></div>
</van-overlay>

        </div>
      </el-main>
     
    </el-container>
  </div>
    <div class="xie">
    <van-icon name="edit" :size="160" @click="fabiao" style="color: orange;"/>
  
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router'; 
const router = useRouter(); 
 const show = ref(false);
const fabiao=()=>{
  router.push('/fabiao')
}
</script>

<style scoped>
.xie{
  width: 3rem;
  height: 3rem;
  position: fixed;
  left: 35%;
  bottom: 10%;
  background-color: yellow;
  text-align: center;
  line-height: 3.5rem;
  background-color: aqua;
  border-radius: 50%;
}
.uia{
    position: relative;
}
.youfu{
    position: absolute;
    right: 0%;
    top: 0%;
}
 .opop{
       color: rgb(234, 189, 105);
    }
.ysjy{
  
    display:flex;
    position: absolute;
    width: 100%;
    height: 135px;

    top: 35%;
    left: 0;
    .qqq{
        width: 30%;
        height: 100%;
      
        position: relative;
        
        img{
            position: absolute;
            top: 25%;
            left: 25%;
            width: 50%;
            height: 50%;
        }
    }
   
    .right{
    width: 60%;
    height: 100%;
    background-color: #fff;
    border-radius: 5px;
    margin-left: 10px;
    position: relative;
    font-size: 13px;
    .xiao{
        font-size: 15px;
    }
    .sj{
        position: absolute;
        left: 0%;
        bottom: 0%;
    }
    .dz{
        position: absolute;
        right: 0%;
        bottom: 0%;
    }
}
}
.xx{
    width: 100px;
    height: 100px;
}
.fbfb{
    display: flex;
    width: 100%;
    height: 60px;

    position: absolute;
            flex-direction: row;
        justify-content: space-around;
        align-items: center;
    top: 82%;
    left: 0;
   .qqq{
    margin-left: 15%;
    line-height: 60px;
   }
   input{
        line-height: 60px;
    width: 70%;
    height: 50px;
    background-color: #000;
    color: #fff;
    margin-left: 10px;
    border-radius: 30px;
    font-size: 10px;
    border: none;
   }
}
.ysjy1{
  
    display:flex;
    position: absolute;
    width: 100%;
    height: 135px;

    top: 60%;
    left: 0;
    .qqq{
        width: 30%;
        height: 100%;
      
        position: relative;
        
        img{
            position: absolute;
            top: 25%;
            left: 25%;
            width: 50%;
            height: 50%;
        }
    }
    .right{
    width: 60%;
    height: 100%;
    background-color: #fff;
    border-radius: 5px;
    margin-left: 10px;
    position: relative;
    font-size: 13px;
    .xiao{
        font-size: 15px;
    }
    .sj{
        position: absolute;
        left: 0%;
        bottom: 0%;
    }
    .dz{
        position: absolute;
        right: 0%;
        bottom: 0%;
    }
}
}

.fuck{
    width: 100%;
    height: 350px;
}
.el-header{
    width: 100%;
    height: 50px;
    border-bottom: 5px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.el-header-icon{
    font-size: 30px;
}
.ls{
    color: deepskyblue;
    margin-top: 20px;
}

.p1{
   margin-top: .5rem
}
.img1{
    width: 80%;
    height: 300px;
    margin-left: 10%;
}
.zp{
position: relative;
    
}
.ic{
    position: absolute;
    color: deepskyblue;
    font-size: 1rem;
   top: 5%;
   right: 8%;
}
.ic1{
     position: absolute;
    color: gold;
    font-size: 1rem;
     top: 5%;
   right: 21%;
}
.fff{
      position: absolute;
 
  font-size: .5rem;
  
     top: 1%;
   right: 18%;
}
.fff1{
    position: absolute; 
  font-size: .5rem;
     top: 1%;
   right: 0%;
}
.khz{
    width: 100%;
    height: 100px;
}

</style>